التبعيات

• Shopify CLI: أداة واجهة سطر أوامر تساعدك على تطوير وإدارة سمات Shopify الخاصة بك.
• TailwindCSS: إطار عمل CSS أولي للأداة المساعدة لبناء تصميمات مخصصة بسرعة.

يثبت

نحن نستخدم Tailwind كأداة CLI مستقلة. لمزيد من المعلومات، يمكنك الرجوع إلى الدليل الرسمي.

ملاحظة: إذا كنت تقوم بإعداد هذا على جهاز Mac مزود بمعالج Intel، فاستبدل macos-arm64 بـ macos-x64 في الأوامر أدناه.

1. قم بتنزيل أحدث إصدار ثنائي TailwindCSS لنظام التشغيل macOS مع بنية ARM64:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. اجعل الملف الذي تم تنزيله قابلاً للتنفيذ:

   chmod x tailwindcss-macos-arm64

3. انقل الملف القابل للتنفيذ إلى اسم أكثر ملاءمة:

   mv tailwindcss-macos-arm64 tailwindcss

4. قم بتشغيل مراقب TailwindCSS:

   • سيراقب هذا الأمر التغييرات في ملف مصدر TailwindCSS (./assets/tailwind.css) ويجمع الإخراج إلى ملف CSS المطلوب (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

نشر

عندما تكون جاهزًا لتجميع CSS الخاص بك للإنتاج، يجب عليك استخدام الأمر التالي لتقليل CSS الخاص بك:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

سيأخذ هذا الأمر ملف CSS المدخل الخاص بك (./assets/tailwind.css)، ويعالجه باستخدام TailwindCSS، ويخرج ملف CSS مصغر (./assets/style.css) محسّنًا للإنتاج.

خاتمة

باتباع هذه الخطوات، تكون قد نجحت في إعداد TailwindCSS كأداة قائمة بذاتها لواجهة سطر الأوامر (CLI) ودمجتها في مشروعك. يتيح لك هذا الإعداد تطوير CSS الخاص بك وإدارته بكفاءة باستخدام نهج الأداة المساعدة Tailwind. يضمن تشغيل المراقب أن يتم تجميع CSS الخاص بك تلقائيًا أثناء التطوير، بينما تقوم خطوة التصغير بإعداد CSS الخاص بك للإنتاج، وتحسينه للأداء. تساعد هذه العملية المبسطة في الحفاظ على قاعدة تعليمات برمجية نظيفة وقابلة للصيانة، مما يسمح لك بالتركيز على بناء وتخصيص قالب Shopify الخاص بك بسهولة.